<template>
 <div class="comp">
        <!-- 图表区域 -->
        <div class="chart" ref="huan"></div>
    </div>
</template>

<script>
export default {
 data() {
 return {
         echartsInstance:null,//存储echarts实例对象
            allData:[]//业务数据
 };
 },
 mounted() {
     // 1.定义获取实例 设置基础静态配置项的绘图方法
        this.initEcharts()
        // 2.获取业务数据
        this.getData()
        // 3.监听窗口变化
        window.addEventListener('resize',this.adapTive)
 },
 methods: {
      // 1.定义获取实例 设置基础静态配置项的绘图方法
        initEcharts(){
            // 1.1获取实例对象
            this.echartsInstance = this.$echarts.init(this.$refs.huan,'dark')
            // 1.2设置静态配置项（配置项是不会变的）
            let initOptions={
                // 配置标题
                title:{
                    text:"▍主要地区农作物种植占比",
                    top:"3%",
                    left:"3%"
                },
               
            }
            // 1.3绘制图表
            this.echartsInstance.setOption(initOptions)
        },
    // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('cropAreasProportion')
            this.allData = data;
            // console.log(data)
            // 继续绘制图表
            this.setEcharts()
            this.adapTive()
        },
       // 3.根据业务数据继续完善图表
        setEcharts(){
             // 3.1根据城市组装对应图表系列 series:[{type:pie,center,radius,data},{},{},{}.....]
              let count=this.allData.length;//获取数据的个数
              let seriesdata=this.allData.map((item,index)=>{
                  return {
                      type:'pie',
                       data:[{name:item.area+'\n'+item.zb+"%",value:item.zb},{value:item.ather}],
                       radius:[200,200],
                       center:[100/(count+1)*(index+1)+'%','50%'],
                       label:{
                           position:'center'
                       }
                  }
              })
           // 3.2设置完善的配置项
           let setOptions={series:seriesdata}
            // 3.3再次绘制图表 setOption()可以将多次的绘图配置项合拼重置绘制新的图表
            this.echartsInstance.setOption(setOptions)
        },
              // 4.窗口适配
        adapTive(){
            // console.log('窗口适配了')
            // 设置比例尺
            let width = this.$refs.huan.offsetWidth;
            let scale = width / 100 *3.6
            // 问题：字体大小 柱状宽度、圆角
           // console.log('适配方法中。。。',this.allData)
            let serirseData = this.allData.map((item,index)=>{
                return {
                    radius:[scale*1.3,scale*1.5],
                    label:{
                        fontSize:scale/2//设置图元上的文字的字体大小
                    }
                }
            })
            let adapOption={
                // 配置标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                },
                series:serirseData
            }
            // 重新适配绘制图表
            this.echartsInstance.setOption(adapOption)
            this.echartsInstance.resize()//只能处理坐标系内的图表大小
        
            },
            beforeDestroy(){
                // 注销窗口监听器 防止内存泄露
                window.removeEventListener('resize',this.adapTive)
            }
 }
};
</script>

<style scoped>

</style>
